<template>
    <div class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center  flex-col">
        <CoreBackGroundColorComponent />
        <CoreBarNavightionComponent />
        <FooterComponent />
        <div class='fixed top-20'>
            <div class="relative nav-image-full">
                <img class="relative w-full h-full ml-1 mr-2 mt-1 mb-2 image-full" :src="userLoginComponentStore.logoIcon"/>
            </div>
        </div>
        <div class="bottom-24 fixed w-screen justify-center items-center text-center">
            <div class="my-3">
                <slot />
                <AgreementComponet />
            </div>
            <AnoterUserComponent />
        </div>
    </div>
</template>

<script setup lang="ts">
const userLoginComponentStore = userUserLoginComponentStore();
</script>

<style scoped>
.nav-image-full {
    background: linear-gradient(to bottom, transparent, #9fdafa);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 12%;
    border-top-left-radius: 12%;
    border-top-right-radius: 50%;
}

.image-full {
    height: 10rem;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 12%;
    border-top-left-radius: 12%;
    border-top-right-radius: 50%;
}
</style>